<template>
<div>
    <div class="int_bg">
        <div class="int_mai">       
            <div class="int_head_bg">
                <h3 class="int_head">去哪儿推荐</h3>
            </div>
            <div class="int_head_bg">
                <div class="int_lie" v-for="item of introduceList" :key="item.id">            
                    <div class="int_left">
                        <h2 class="mp-ticket-title">{{item.title}}</h2>
                        <span class="mp-ticket-desctag">
                            <img class="mp-ticket-tagicon" 
                            src="https://img1.qunarzz.com/piao/fusion/1804/f0/39deb48037c83702.png">{{item.time}}前可订今日,预订后2小时可用
                            </span>
                            <p class="mp-ticket-label">{{item.refund}}</p>
                    </div>
                    <div class="int_right">
                        <p>¥<span>{{item.price}}</span></p>
                        <button>购买</button>
                    </div>   
                </div>  
            </div>
            <div class="int_foot">
                <h3>查看剩余产品<span class="fa fa-angle-down fa-2x"></span></h3>
            </div>         
        </div>
     </div>   
</div>
    
</template>

<script>
export default {
  name: "introduce",
    props: {
        introduceList:Array
    },
};
</script>

<style lang="stylus" scoped>
.int_head {
    overflow: hidden;
    position: relative;
    z-index: 4;
    margin-bottom: -0.02rem;
    padding: 0 0.2rem;
    height: 0.88rem;
    background: #fff;
    color: #333;
    font-size: 0.32rem;
    line-height: 0.88rem;
    background: url('/assets/images/tuijian.png') no-repeat;
    background-size: 6%;
    background-position: 0%;
    padding-left: 0.6rem;
    border-bottom: 1px solid rgba(17, 34, 17, 0.2);
}

.int_bg {
    background: #e9f3f5;
    padding-top: 5px;
}

.int_head_bg {
    background: #fff;
}
.int_lie{
    overflow: hidden;
        padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(17,34,17,0.2);
}
.int_mai {
    background: white;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.mp-ticket-desctag {
    display: inline-block;
    /* height: 0.2rem; */
    color: #616161;
    font-size: 0.24rem;
    line-height: 0.45rem;
    white-space: nowrap;
}

.int_left,{
    float: left;
    width 75%
}
.int_right{
    float right 
}
.mp-ticket-title {
    line-height: 0.52rem;
    padding: 0;
    font-size: 0.3rem;
    margin-top: 0.2rem;
}

.mp-ticket-desctag img {
    width: 6%;
    margin-top: -0.5px;
}

.mp-ticket-label {
    margin-top: 0.08rem;
    padding: 0 0.04rem;
    height: 0.32rem;
    color: #00afc7;
    font-size: 0.2rem;
    line-height: 0.32rem;
    white-space: nowrap;
    border: 1px solid #a5e4ec;
    width: 0.7rem;
}

.int_right p {
       color: #ff9800;
    font-size: 0.1rem;
    text-align: center;
    margin-top: 0.3rem;
    margin-bottom: 0.1rem;
}

.int_right p span {
    margin-left: 0.04rem;
    font-size: 0.4rem;
    line-height: 0.4rem;
    color: #ff9800;
}
.int_right button{
    
height: .6rem;
    color: #fff;
    font-size: .28rem;
    line-height: .6rem;
    -webkit-border-radius: .08rem;
    -moz-border-radius: .08rem;
    border-radius: .08rem;
    background-image: -webkit-gradient(linear,left top,right bottom,from(#ffab1e),to(#ff8c12));
    background-image: -webkit-linear-gradient(-60deg,#ffab1e 37%,#ff8c12 100%);
    background-image: -moz-linear-gradient(-60deg,#ffab1e 37%,#ff8c12 100%);
    background-image: -o-linear-gradient(-60deg,#ffab1e 37%,#ff8c12 100%);
    background-image: linear-gradient(130deg,#ffab1e 37%,#ff8c12 100%);    
        width: 1.5rem;
}
.int_foot{
    position: relative;
   
    height: .8rem;
    background: #fff;
    color: #616161;
    line-height: .8rem;
    text-align: center;
  
}
.int_foot h3 span{
        position: relative;
    top: 0.1rem;
    font-size: 0.6rem;
}
</style>
